import './index.less';
import { useEffect, useState } from 'react';
import moment from 'moment';
import HomeLeft from './home_page_left';
import HomeMid from './home_page_middle';
import HomeRight from './home_page_right';
function Time() {
  const [now, setNow] = useState(moment()); // 会返回当前状态的属性 和修改状态的方法
  const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  useEffect(() => {
    // 可以在函数组件内处理生命周期事件，默认情况，每次渲染都会调用该函数
    const t = setInterval(() => {
      setNow(moment());
    }, 1000);

    return () => {
      // 每次卸载都执行此函数，清楚定时器
      clearTimeout(t);
    };
  }, []);

  return (
    <div>
      <span>
        {now.format('YYYY-MM-DD')}&nbsp;{weeks[moment().day()]}&nbsp;
        {now.format('HH:mm:ss')}
      </span>
    </div>
  );
}

export default function Home() {
  return (
    <div className="home">
      <div className="home-title">
        <div className="home-title-left">
          <img src={require('@/assets/Import@2x.png')} alt="" />
          <span className="exit">退出</span>
        </div>
        <div className="home-title-right">
          <Time />
        </div>
      </div>
      <div className="home-content">
        <HomeLeft />
        <HomeMid />
        <HomeRight />
      </div>
    </div>
  );
}
